<template>
    <div>
        <div v-if="props.title">【{{ props.title }}】</div>
        <div ref="target" class="w-full h-full"></div>
    </div>
</template>
<script setup>
import { ref, onMounted, watch, defineExpose } from 'vue'
import * as echarts from 'echarts'

const props = defineProps({
    title: {
        type: String,
        default: ''
    },
    options: {
        type: Object,
        default: () => ({})
    }
})

// 1、初始化 echarts 实例
let chart = null
const target = ref(null)
onMounted(() => {
    chart = echarts.init(target.value)
    renderChart()
})

// 2、构建 option 配置对象
const renderChart = () => {
    const options = props.value.options

    // 3、通过 实例.setOption(option) 渲染图表
    chart.setOption(options)
}

defineExpose({
    renderChart
});
</script>

<style lang="scss" scoped></style>